<template>
  <div>
    <div class="toubudaohang flex ai-c">
      <el-radio-group v-model="tabPosition">
        <el-radio-button @click.native="$router.push('/layout/Rotationsettings')" label="Rotationsettings">轮播设置
        </el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/Rolemanagement')" label="Rolemanagement">角色管理
        </el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/announcement')" label="announcement">公告提示
        </el-radio-button>
      </el-radio-group>
    </div>
    <!-- main -->
    <div class="main">
      <div class="main-all">
        <!-- 左边内容  -->
        <div class="role-list flex fd-c">
          <div class="flex jc-sb">
            <div class="role-text">
              <span>角色</span>
            </div>
            <div class="cursor" @click="plusdialogVisible = true">
              <i style="color: #afb2bc" class="el-icon-plus"></i>
            </div>
          </div>

          <div class="main-left-content">
            <ul v-for="item in roleslist" :key="item.id">
              <li class="other">
                {{ item.name }}
                <div class="there-pic">
                  <img v-if="item.id != 1" src="../assets/up.svg" alt="" @click="setdialogVisible(item)" />
                  <img v-if="item.id != 1" src="../assets/bi.png" alt="" @click="setdialogVisibleShow(item)" />
                  <img v-if="item.id != 1" src="../assets/del.png" alt="" @click="setdialogVisibleDel(item)" />
                </div>
              </li>
              <li @click="adminroleinfo(it)" :class="{ hoverclicp: activeclip == it.id }" class="clip"
                v-for="it in item.roles" :key="it.id">
                <p>{{ it.name }}</p>
                <div class="there-pic flex cc">
                  <img v-if="it.id != 1 && it.id != 2" src="../assets/bi.png" alt=""
                    @click="setdialogVisibleName(it)" />
                  <img v-if="it.id != 1 && it.id != 2" src="../assets/del.png" alt=""
                    @click="setdialogVisibleDelect(it)" />
                </div>
              </li>
            </ul>
          </div>
        </div>

        <!-- 右边内容 -->
        <div class="user-Right">
          <div class="tree-top">
            <div class="tree-content">
              <el-tree ref="tree" :data="data" show-checkbox node-key="id" default-expand-all
                :default-checked-keys="authorityIds" :props="defaultProps">
              </el-tree>
            </div>
          </div>
          <div class="save flex ai-c jc-c">
            <el-button class="save-btn" v-show="activeclip" @click="adminroleupdate">保存</el-button>
          </div>
          <!-- 分页 -->
        </div>
      </div>
    </div>
    <el-dialog title="新增分组" width="445px" center :visible.sync="plusdialogVisible">
      <div class="user-plus">
        <el-input type="text" v-model="name" placeholder="请输入分组名称" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="plusdialogVisible = false">取 消</el-button>
        <el-button class="surebtn" @click="adminrolegroupadd">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog width="445px" center title="删除提示" :visible.sync="dialogVisibleDelect">
      <div class="user-name flex jc-c">
        <span>确认删除?</span>
      </div>
      <div class="user-copy"></div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="dialogVisibleDelect = false">取 消</el-button>
        <el-button class="surebtn" @click="adminroledel">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="isedit ? '编辑角色' : '新增角色'" :visible.sync="dialogVisibleName" width="445px" center>
      <div class="user-name">
        <el-input type="text" v-model="rolename" placeholder="请输入角色名称" />
      </div>
      <div class="user-copy"></div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="dialogVisibleName = false">取 消</el-button>
        <el-button class="surebtn" @click="adminrolegroupupdate;">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="isedit ? '编辑角色' : '新增角色'" :visible.sync="dialogVisible" width="445px" center>
      <div class="user-name">
        <el-input type="text" v-model="rolename" placeholder="请输入角色名称" />
      </div>
      <div class="user-copy flex ai-c">
        <el-checkbox v-model="checked">复制角色</el-checkbox>
        <el-select v-model="copyRoleId" :disabled="!checked" placeholder="请选择角色">
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <div style="width: 200px">的权限到此角色</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="dialogVisible = false">取 消</el-button>
        <el-button class="surebtn" @click="roleadd">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑分组" width="445px" center :visible.sync="dialogVisibleShow">
      <div class="user-name">
        <el-input type="text" v-model="name" placeholder="请填写" />
      </div>
      <div class="user-copy"></div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="dialogVisibleShow = false">取 消</el-button>
        <el-button class="surebtn" @click="adminrolegroupupdate()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="删除提示" width="445px" center :visible.sync="dialogVisibleDel">
      <div class="user-name flex jc-c">
        <span>确认删除?</span>
      </div>
      <div class="user-copy"></div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="dialogVisibleDel = false">取 消</el-button>
        <el-button class="surebtn" @click="adminrolebatchdel()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  adminrolegrouplist,
  adminrolegroupadd,
  adminrolegroupupdate,
  adminrolebatchdel,
  adminroleauthoritylist,
  adminrolelist,
  adminroleadd,
  adminroledel,
  adminroleupdate,
  adminroleinfo,
} from "@/api/index";
export default {
  data() {
    return {
      // 角色管理
      data: [],
      value: "",
      checked: false,
      disabled: true,
      options: [],
      dialogVisible: false,
      dialogVisibleShow: false,
      dialogVisibleDel: false,
      dialogVisibleName: false,
      dialogVisibleDelect: false,
      defaultProps: {
        children: "authorityVos",
        label: "name",
      },
      //   分页
      pageNums: [
        {
          Numones: "6条/页",
          numBers: "5条/页",
        },
      ],
      Numones: "",
      input: "",
      value: "",
      valueChoose: "",
      // 时间选择器
      valueone: "",
      countPoint: 0,
      isPoint: 0,
      rightContent: 0,
      pointAll: 0,
      groupbg: false,
      plusdialogVisible: false,
      roleslist: [],
      name: "",
      idfenzu: "",
      type: "",
      roleId: "",
      rolename: "",
      roleGroupId: "",
      copyRoleId: "",
      delid: "",
      activeclip: "",
      authorityIds: [],
      isedit: false,
      tabPosition: "Rolemanagement",
    };
  },
  created() {
    this.adminrolelist();
    this.adminrolegrouplist();
    this.adminroleauthoritylist();
  },
  methods: {
    adminroleinfo(it) {
      this.activeclip = it.id;
      this.checked = false;
      this.$refs.tree.setCheckedKeys([]);
      adminroleinfo({
        id: it.id,
      }).then((res) => {
        console.log(res);
        this.authorityIds = res.data.authorityIds;
        this.rolename = res.data.name;
        this.roleId = res.data.id;
        this.roleGroupId = res.data.roleGroupId;
      });
    },
    setdialogVisibleName(it) {
      this.roleGroupId = it.roleGroupId;
      this.authorityIds = it.authorityIds;
      this.rolename = it.name;
      this.isedit = true;
      this.roleId = it.id;
      this.dialogVisible = true;
    },
    adminroleupdate() {
      console.log(this.$refs.tree.getCheckedKeys());
      if (this.$refs.tree.getCheckedKeys().length > 0) {
        this.authorityIds = this.$refs.tree.getCheckedKeys();
      }
      if (this.checked) {
        this.type = 1;
      } else {
        this.type = 2;
      }
      adminroleupdate({
        name: this.rolename,
        roleGroupId: this.roleGroupId,
        type: this.type || 2,
        copyRoleId: this.copyRoleId,
        authorityIds: this.authorityIds,
        roleId: this.roleId,
      }).then((res) => {
        this.$message.success("编辑成功");
        this.copyRoleId = this.options[0].id;
        this.type = "";
        this.adminrolegrouplist();
        this.dialogVisible = false;
      });
    },
    setdialogVisibleDelect(it) {
      this.delid = it.id;
      this.dialogVisibleDelect = true;
    },
    roleadd() {
      if (this.isedit) {
        this.adminroleupdate();
      } else {
        this.adminroleadd();
      }
    },
    adminroledel() {
      adminroledel({
        id: this.delid,
      }).then((res) => {
        this.$message.success("删除成功");
        this.adminrolegrouplist();
        this.dialogVisibleDelect = false;
        this.adminrolelist();
      });
    },
    setdialogVisible(item) {
      this.isedit = false;
      this.activeclip = "";
      this.rolename = "";
      this.roleGroupId = item.id;
      this.dialogVisible = true;
    },
    adminroleadd() {
      if (this.checked) {
        this.type = 1;
      } else {
        this.type = 2;
      }
      adminroleadd({
        name: this.rolename,
        roleGroupId: this.roleGroupId,
        type: this.type,
        copyRoleId: this.copyRoleId,
      }).then((res) => {
        this.dialogVisible = false;
        this.$message.success("添加成功");
        this.rolename = "";
        this.roleGroupId = "";
        this.copyRoleId = this.options[0].id;
        this.type = "";
        this.adminrolegrouplist();
        this.adminrolelist();
      });
    },
    adminrolelist() {
      adminrolelist({}).then((res) => {
        this.options = res.data;
        this.copyRoleId = res.data[0].id;
      });
    },
    adminroleauthoritylist() {
      adminroleauthoritylist().then((res) => {
        this.data = res.data;
      });
    },
    setdialogVisibleDel(item) {
      this.idfenzu = item.id;
      this.dialogVisibleDel = true;
    },
    setdialogVisibleShow(item) {
      this.name = item.name;
      this.idfenzu = item.id;
      this.dialogVisibleShow = true;
    },
    adminrolebatchdel() {
      adminrolebatchdel({
        id: this.idfenzu,
      }).then((res) => {
        this.dialogVisibleDel = false;
        this.$message.success("删除成功");
        this.adminrolegrouplist();
        this.adminrolelist();
      });
    },
    adminrolegroupupdate() {
      adminrolegroupupdate({
        id: this.idfenzu,
        name: this.name,
      }).then((res) => {
        this.dialogVisibleShow = false;
        this.adminrolegrouplist();
        this.name = "";
        console.log(res);
      });
    },
    adminrolegroupadd() {
      adminrolegroupadd({
        name: this.name,
      }).then((res) => {
        this.plusdialogVisible = false;
        this.$message.success("添加成功");
        this.name = "";
        this.adminrolegrouplist();
      });
    },
    adminrolegrouplist() {
      adminrolegrouplist().then((res) => {
        this.roleslist = res.data;
      });
    },
    // 加号
    plus() {
      this.$confirm(
        '<div class="userGrouping"><input type="text" placeholder="请输入分组名称"></div>',
        "新增分组",
        {
          dangerouslyUseHTMLString: true,
        }
      );
      console.log("加号");
    },
    grouping(num) {
      this.groupbg = num;
    },
    choosePoint(index) {
      this.isPoint = index;
      this.pointAll = index;
      console.log(this.isPoint);
    },

    // 角色加号

    // 编辑分组
    editShow() { },
    // 复制角色
    copyRole() {
      console.log(this.type);
      this.disabled = true;
    },
    close() {
      console.log("123");
    },
  },
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f2f2f2;");
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
};
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
}

.main {
  width: 100%;
  margin-top: 24px;
}

.main-all {
  display: flex;
  height: calc(100vh - 230px);
}

.role-list {
  width: 320px;
  height: calc(100vh - 230px);
  overflow: auto;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  padding: 20px;
  box-sizing: border-box;
  margin-right: 20px;

  img {
    cursor: pointer;
  }

  div {
    // margin-right: 20px;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
  }
}

.def-group {
  width: 267px;
  margin-top: 10px;
}

.main-left-content {
  // width: 239px;
  margin-top: 20px;

  ul {

    // width: 267px;
    // margin-left: 17px;
    li {
      height: 30px;
      line-height: 30px;
      cursor: pointer;
      margin-bottom: 10px;

      img {
        width: 14px;
        height: 14px;
      }
    }

    .hoverclicp {
      background-color: #fff3f5 !important;
    }

    .clip:hover {
      position: relative;
      background-color: #fff3f5;
    }

    .cc img {
      display: none;
    }

    .clip:hover img {
      display: block;
    }

    .pic-jue {
      display: flex;

      div {
        width: 200px;
      }
    }

    li:nth-child(1) {
      color: #7f7f7f;
      font-size: 14px;
      font-weight: normal;
      margin-left: 0px;
    }

    li:nth-child(3) {
      // margin-bottom: 20px;
    }
  }
}

.user-Right {
  width: calc(100% - 340px);
  // background: #ffffff;
  // padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.righ-top {
  width: 600px;
  display: flex;
  justify-content: flex-end;
  margin: 0 auto;

  .user-input {
    width: 300px;
    margin-right: 24px;
  }
}

// 保存按钮

.save {
  // width: 300px;
  text-align: center;
  height: 70px;
  margin-top: 20px;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
}

.point-list>div {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  cursor: pointer;
  color: #7f7f7f;
  margin-bottom: 15px;
}

.point-list .countBg {
  color: #000000;
  font-weight: bold;
  background-color: #f2f2f2;
}

.point-right {
  width: 1000px;
  margin: 0 auto;
  padding-top: 40px;
}

.point-top {
  width: 900px;
  display: flex;
  justify-content: flex-start;
  //   justify-content: space-around;
  margin: 0 auto;

  .point-input {
    width: 227px;
    outline: none;
    margin-right: 20px;
    padding-left: 14px;
    border-radius: 3px;
    height: 40px;
    border: 1px solid rgba(220, 230, 234, 1);
  }
}

.point-top div {
  margin-right: 15px;
}

.el-select {
  margin-right: 26px;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  margin-right: 26px;
}

.el-button--primary {
  margin-right: 15px;
}

.form-list {
  width: 900px;
  margin-top: 35px;
  margin: 0 auto;
  // border: 1px solid red;
  // border-right:1px solid red;
}

table {
  border: 1px solid #ebebeb;
  width: 888px;
  text-align: center;
}

.form-top {
  background-color: rgb(242, 242, 242);
}

tr {
  border: 1px solid #ebebeb;
}

td {
  font-size: 13px;
  color: #333333;
  height: 30px;
  //  padding-top: 5px;
  line-height: 30px;
  //     border-top:  1px solid red;
  border: 1px solid #ebebeb;

  img {
    padding-top: 15px;
  }
}

.again-pwd {
  width: 248px;
  margin: 0 auto;
  justify-content: center;
  text-align: center;
  display: flex;
}

.query-ThreeBtn button {
  margin-top: 1px;
}

button {
  padding: 11px 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
}

// 分页
.page {
  width: 853px;
  margin-bottom: 40px;
  display: flex;
  margin: 0 auto;
  justify-content: center;
  margin-top: 40px;
}

.page-num {
  width: 100px;
  // margin-right: 15px;
}

span {
  font-size: 14px;
}

.page-select {
  margin-right: 15px;
  width: 156px;

  input {
    height: 21px;
  }
}

.go-page {
  width: 500px;
  margin-top: 5px;

  span {
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
  }
}

.el-input__icon {
  line-height: 21px !important;
}

.user-Left li {
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 14px;
  padding-left: 10px;
  color: #333333;
  margin-bottom: 20px;
}

.user-Left .other>div {
  padding-top: 10px;
  margin-left: 10px;
}

.other {
  // width: 240px;
  position: relative;
  // padding-left: 26px;
  // padding-right: 21px;
  // background-color: #f2f2f2f2;
  color: #7f7f7f;
  // box-sizing: border-box;

  .there-pic {
    position: absolute;
    top: 2px;
    right: 9px;
  }

  img {
    width: 14px;
    height: 14px;
    margin-left: 21px;
  }
}

.clip {
  position: relative;
  padding-left: 29px;
  // padding-right: 2px;
  // right: 30px;
  // background-color: #f2f2f2f2;

  .there-pic {
    position: absolute;
    top: 7px;
    right: 9px;
  }

  img {
    width: 14px;

    height: 14px;
    margin-left: 21px;
  }
}

.tree-top {
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  overflow: auto;
  background: #fff;
  height: calc(100vh - 320px);

  // width: 1000px;
  // min-width: 1200px;
  // margin-top: 15px;
  // margin-left: 62px;
}

.tree-content {
  width: 230px;
}

.el-table .cell,
.el-table--border .el-table__cell:first-child .cell {
  text-align: center !important;
}

.userGrouping {
  width: 194px;
  margin: 0 auto;

  input {
    height: 34px;
    padding-left: 5px;
    outline: none;
    border: 1px solid rgba(215, 215, 215, 1);
  }
}

.user-plus {
  // width: 300px;
  text-align: left;
  // margin-left: 16px;

  input {
    width: 265px;
    height: 30px;
    padding-left: 8px;
    outline: none;
    border: 1px solid rgba(215, 215, 215, 1);
    border-radius: 3px;
  }
}

// 新增角色
.user-name {
  // width:300px;
  text-align: left;
  // margin: 0 auto;

  input {
    width: 265px;
    height: 34px;
    padding-left: 5px;
    outline: none;
    border: 1px solid rgba(215, 215, 215, 1);
  }
}

.el-dialog {
  min-width: 600px;
}

.user-copy {
  width: 334px;
  // margin: 0 auto;
  padding-top: 20px;

  .el-input__inner {
    width: 124px;

    color: #7f7f7f;
  }

  span {
    color: #7f7f7f;
    font-size: 13px;
    display: inline-block;
  }

  .el-checkbox:last-of-type {
    margin-right: 6px;
  }
}
</style>
<style scoped lang="scss">
.toubudaohang {
  width: 100%;
  height: 84px;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  padding-left: 30px;
  box-sizing: border-box;
}
</style>
<style scoped>
.colorflag {
  height: 20px;
  width: 100%;
  background: #f4f4f4;
}
</style>

<style scoped>
/* 保存背景样式 */
.save-btn {
  width: 96px;
  height: 40px;
  color: #ffffff;
  text-align: center;

  border: none;
  background-color: #ff5478;
  /* 不支持线性的时候显示 */
  background-image: linear-gradient(to left, #ff5478, #ff7aaf);

  align-items: center;
}
</style>